<template>
  <view>
    <u-navbar
      backIconColor="#333333"
      title-size="36"
      :title="title"
      height="50"
      :is-back="true"
      :border-bottom="false"
      title-color="#333333"
    >
    </u-navbar>
    <view class="card">
      <view class="title">
        兑换{{ duihuanTitle }}
        <text class="bl" v-if="type == 1">(兑换比例=1:1)</text>
        <text class="bl" v-else-if="type == 2"
          >(兑换比例=100:{{ setting.cryptocurrencyToMoneyPercent }})
        </text>
        <text class="bl" v-else-if="type == 3"
          >(兑换比例=100:{{ setting.bonusToMoneyPercent }})
        </text>
        <text class="bl" v-else>(兑换比例=100:?)</text>
      </view>
      <u-line></u-line>
      <view class="cell">
        <input
          @input="amountChange"
          :placeholder="`输入兑换` + exchangeTitle + `个数`"
          v-model="form.amount"
        />
      </view>
      <u-line></u-line>
      <view class="ms dis-flex flex-y-between flex-y-center">
        <view v-if="type == 1">
          <text>当前可兑换</text>
          <text style="color: orange; font-weight: bold">{{ setting.cryptocurrencyOrigin }}个</text>
          <text>联盟豆</text>
        </view>
        <view v-else-if="type == 2">
          <text>当前可兑换</text>
          <text style="color: orange; font-weight: bold"
            >{{ setting.cryptocurrencyIncrement }}个
          </text>
          <text>收益豆</text>
        </view>
        <view v-else-if="type == 3">
          <text>当前可兑换</text>
          <text style="color: orange; font-weight: bold">{{ setting.bonus }}个</text>
          <text>分红豆</text>
        </view>
        <view v-else>
          <text>未知的兑换类型</text>
        </view>
        <view class="all" @click="all()">全部兑换</view>
      </view>
      <u-line></u-line>
      <view class="res dis-flex flex-y-between flex-y-center">
        <view>兑换{{ duihuanTitle }}为</view>
        <view class="num">¥{{ duihuanAmount }}</view>
      </view>
    </view>
    <view class="sub" @click="incrementTo">确认兑换</view>
    <view class="tishi">
      <view v-if="type == 1">
        <u-parse :html="setting.cryptocurrencyNotIncrementTips" />
      </view>
      <view v-else-if="type == 2">
        <u-parse :html="setting.cryptocurrencyToMoneyTips" />
      </view>
      <view v-else-if="type == 3">
        <u-parse :html="setting.bonusToMoneyTips" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: 1,
      title: '',
      digitalAssets: null,
      duihuanTitle: '',
      exchangeTitle: '',
      setting: null,
      form: {
        amount: null
      },
      duihuanAmount: 0
    }
  },
  onLoad(options) {
    this.type = options.type || 1
    if (this.type == 1) {
      this.title = '兑换收益豆'
      this.duihuanTitle = '收益豆'
      this.exchangeTitle = '联盟豆'
      this.$u.get('/app-api/member/digital-assets/cryptocurrency/overview').then((res) => {
        this.setting = res.data
      })
    } else if (this.type == 2) {
      this.title = '兑换现金'
      this.duihuanTitle = '现金'
      this.exchangeTitle = '收益豆'
      this.$u.get('/app-api/member/digital-assets/cryptocurrency/overview').then((res) => {
        this.setting = res.data
      })
    } else if (this.type == 3) {
      this.duihuanTitle = '现金'
      this.exchangeTitle = '分红豆'
      this.$u.get('/app-api/member/digital-assets/bonus/overview').then((res) => {
        this.setting = res.data
      })
    } else {
      this.title = '兑换类型未知'
      this.duihuanTitle = '？'
      this.exchangeTitle = '?'
    }
  },
  methods: {
    all() {
      if (this.type == 1) {
        this.form.amount = this.setting?.cryptocurrencyOrigin
      } else if (this.type == 2) {
        this.form.amount = this.setting?.cryptocurrencyIncrement
      } else if (this.type == 3) {
        this.form.amount = this.setting?.bonus
      }
      this.amountChange()
    },
    amountChange() {
      if (this.type == 1) {
        this.duihuanAmount = this.form.amount
      } else if (this.type == 2) {
        this.duihuanAmount = (
          (this.form.amount * this.setting?.cryptocurrencyToMoneyPercent) /
          100
        ).toFixed(2)
      } else if (this.type == 3) {
        this.duihuanAmount = ((this.form.amount * this.setting?.bonusToMoneyPercent) / 100).toFixed(
          2
        )
      }
    },
    incrementTo() {
      let url
      if (this.type == 1) {
        url = '/app-api/member/digital-assets/cryptocurrency/origin-not-increment'
      } else if (this.type == 2) {
        url = '/app-api/member/digital-assets/cryptocurrency/increment-to-money'
      } else if (this.type == 3) {
        url = '/app-api/member/digital-assets/bonus/to-money'
      } else {
        this.$u.toast('不支持的兑换类型：' + this.type)
        return
      }
      if (!this.form.amount || Number(this.form.amount) <= 0) {
        this.$u.toast('兑换数量无效')
        return
      }
      this.$u.post(url, this.form).then((res) => {
        if (res.code === 0) {
          this.$u.toast('兑换成功')
          setTimeout(function () {
            uni.navigateBack()
          }, 1500)
        } else {
          this.$u.$toast(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  background: #ffffff;
  border-radius: 10rpx;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 30rpx 20rpx;

  .title {
    font-size: 32rpx;
    margin-bottom: 35rpx;

    .bl {
      color: #999999;
      font-size: 26rpx;
    }
  }

  .cell {
    padding: 23rpx 0;

    input {
      font-size: 36rpx;
    }
  }

  .ms {
    padding: 30rpx 0;
    color: #999999;
    font-size: 28rpx;

    .all {
      color: #10a28f;
    }
  }

  .res {
    padding-top: 30rpx;
    font-size: 26rpx;
    color: #333333;

    .num {
      font-weight: 600;
      font-size: 36rpx;
    }
  }
}

.sub {
  width: 710rpx;
  height: 80rpx;
  background: #10a28f;
  border-radius: 40rpx;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 80rpx;
  text-align: center;
  margin: auto;
  margin-top: 110rpx;
  margin-bottom: 59rpx;
}

.tishi {
  font-size: 28rpx;
  color: #333333;
  line-height: 48rpx;
  margin: 0 20rpx;

  .tl {
    margin-bottom: 4rpx;
  }
}
</style>
